<template>
    <transition name="el-fade-in-linear">
        <el-dialog 
            v-if="dialogVisible"
            :visible.sync="dialogVisible" 
            :modal="false" 
            :center="true"
            :destroy-on-close="true"
            :fullscreen="fullscreen"
            :class="[fullscreen ? 'isFullscreen' : '']"
            :width="width"
            :close-on-click-modal="false"
            :top="top"
            custom-class="custom-class">
            <slot></slot>
        </el-dialog>
    </transition>
</template>

<script>
export default {
    name: 'custom-dialog',
    props: {
        width: {
            type: String,
            default: () => '50%'
        },
        dialogVisible: {
            type: Boolean,
            default: () => false
        },
        fullscreen: {
            type: Boolean,
            default: () => false
        },
        top: {
            type: String,
            default: () => '18%'
        }
    },

    created() {
        
    },

    data() {
        return {
            
        };
    }
};
</script>

<style lang="scss" scoped>
    :deep(.el-dialog__header)  {
        display: none;
    }

    :deep{
        // .el-dialog {
        //     width: 45%;
        // }
        .el-dialog__body {
            background: rgba(255, 255, 255, 0.7);
            padding: 0px !important;
        }

        .el-dialog.is-fullscreen {
            .el-dialog__body {
                height: 100%;
            }
        }
        
        .el-dialog {
            background: rgba(255, 255, 255, 0);
        }
    }

</style>